<template>
  <!-- 查看公告 -->
  <div class="announcement">
    <el-tooltip
      class="item"
      effect="dark"
      content="查看公告"
      placement="bottom"
    >
      <img
        src="../assets/nav-img/gonggao.svg"
        alt=""
        @click="dialogVisible = true"
      />
    </el-tooltip>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-dialog title="施工公告信息" :visible.sync="dialogVisible" width="40%">
        <hr />
        <div class="notice">
          <div class="notice_time">
            <span>公告发布时间：</span>{{ noticeTime }}
          </div>
          <div class="notice_content">
            <span>公告发布内容：</span>{{ noticeContent }}
          </div>
        </div>
      </el-dialog>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'announcement',
  data() {
    return {
      activeIndex: '1',
      dialogVisible: false,
      noticeTime: '',
      noticeContent: '',
      noticeArea: '',
    };
  },
  mounted() {
    this.getNotice();
  },
  methods: {
    getNotice() {
      this.$http.get('/notice').then((res) => {
        // console.log(res.result[0]);
        this.noticeTime = res.result[0].notice_time;
        this.noticeContent = res.result[0].notice_content;
        this.noticeArea = res.result[0].affected_area;
      });
    },
  },
};
</script>
<style>
.announcement {
  width: 50px;
  position: absolute;
  top: 16px;
  right: 160px;
}
.announcement img {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.6);
}
.notice {
  margin-top: 20px;
}
.notice span {
  font-weight: 700;
  color: #333;
}
.notice_content {
  height: 25px;
  line-height: 20px;
  margin-top: 10px;
}
</style>
